<template>
	<view class="box">
		<view v-if="orderList.length > 0">
			<view class="order_card" v-for="(item, index) in orderList" :key="index">
				<view class="order_card_top">
					<!-- 订单号圆点 -->
					<view class="order_id_left"></view>
					<!-- 订单号 -->
					<view class="order_id_text">
						<text>预约单号：{{item.orderId}}</text>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="order_info">
					<view class="order_info_item">
						<text class="order_info_item_left">预约时间：</text>
						<text class="order_info_item_right">{{ item.appointmentTime+'-'+item.segment }}</text>
					</view>
					<view class="order_info_item">
						<text class="order_info_item_left">预约医生：</text>
						<text class="order_info_item_right">{{item.acceptName}}</text>
					</view>
					<view class="order_info_item">
						<text class="order_info_item_left">服务地址：</text>
						<text class="order_info_item_right">{{item.address}}</text>
					</view>
					<view class="order_info_item">
						<text class="order_info_item_left">预约人：</text>
						<text class="order_info_item_right">{{ item.contactName+"-"+item.contactPhone}}</text>
					</view>
					<view class="yuyue_btn" v-if="ylUserInfo.type == '1'">
						<u-button @click="updateOrder(item.orderId, 3)" shape="square"
							:custom-style="rejectCS">拒绝预约</u-button>
						<u-button @click="updateOrder(item.orderId, 1)" shape="square"
							:custom-style="acceptCS">接受预约</u-button>
					</view>
					<view class="yuyue_btn" v-else style="justify-content: flex-end;margin-right: 32rpx;">
						<view v-if="item.status == '3'" style="color: #FA5151;">医生已拒绝</view>
						<view v-if="item.status == '1'" style="color: #00B4C7;">医生已接受</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 100px;">
			<u-empty text="暂无预约" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getOrderListApi
	} from '../../common/API/orderApi.js'
	import {
		updateStatusByType
	} from '../../common/API/doctorApi.js'
	export default {
		data() {
			return {
				rejectCS: {
					width: "200rpx",
					height: "70rpx",
					borderRadius: "40rpx",
					color: "#00B4C7",
					borderColor: "#00B4C7",
					marginLeft: "260rpx",
					fontSize: "27rpx",

				},
				acceptCS: {
					width: "200rpx",
					height: "70rpx",
					borderRadius: "40rpx",
					color: "#FFFFFF",
					backgroundColor: "#00B4C7",
					borderColor: "#00B4C7",
					marginLeft: "20rpx",
					marginRight: "20rpx",
					fontSize: "27rpx",
				},
				orderList: [],
				total: 0,
				pageNum: 1,
				pageSize: 10,
				//判断是否请求完毕数据
				isBottom: false,
				//底部文字
				bottomText: '加载中...',
			}
		},
		// async onLoad(options) {
		// 	this.listInit()
		// },
		onLoad() {
			// uni.startPullDownRefresh();
		},
		async onShow() {
			this.getList()
		},
		// 下拉加载
		async onReachBottom() {
			console.log('上拉加载', this.orderList.length , this.total)
			
			if (this.orderList.length >= this.total) {
				return uni.$showMsg("没有更多数据了")
			}
			this.pageNum += 1
			this.getList()
		},
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		// 上拉刷新
		onPullDownRefresh() {
			this.listInit()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			listInit() {
				this.pageNum = 1
				this.orderList = []
				this.isBottom = false
				this.bottomText = '加载中...'
				this.getList()
			},
			// scroll-view到底部加载更多
			// onreachBottom() {
			// 	if (!this.isBottom) {
			// 		this.pageNum += 1
			// 		this.getList()
			// 	}
			// },
			// 分页查询订单
			async getList() {
				const res = await getOrderListApi({
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"status": '',
					"userCode": this.ylUserInfo.username,
					"orderType": 13
				})
				if (res.status == 200) {
					res.data.records.forEach((item) => {
						item.appointmentTime = item.appointmentTime && item.appointmentTime.split(' ')[0]
					})
					this.orderList = this.orderList.concat(res.data.records)
					this.total = res.data.total
				}
				// if (this.orderList.length >= this.total) {
				// 	this.isBottom = true
				// 	this.bottomText = '没有更多数据了~'
				// }
			},
			// 修改
			updateOrder(orderId, status) {
				let that = this
				let data = {
					orderId,
					orderType: 13,
					status
				}
				console.log(data)
				uni.showModal({
					content: '确定修改吗？',
					cancelColor: '#9b9b9b', //删除按钮颜色
					confirmColor: '#00B4C7', //确定按钮颜色
					success: async function(res) {
						if (res.confirm) {
							const res = await updateStatusByType(data)
							// console.log(res)
							if (res.status == 200) {
								uni.$showMsg('修改成功')
								setTimeout(() => {
									that.listInit()
								}, 600)
							}
						}
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 20rpx;
		height: calc(100vh - 50rpx);
		// overflow-y: scroll;
	}

	.order_card {
		.order_card_top {
			display: flex;
			justify-content: left;
			align-items: center;
			margin: 30rpx 20rpx;

			.order_id_left {
				width: 16rpx;
				height: 16rpx;
				background-color: #00B4C7;
				border-radius: 100rpx;
			}

			.order_id_text {
				margin-left: 16rpx;

				text {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 30rpx;
					font-style: normal;
					text-decoration: none;
					text-align: left;
				}

			}
		}

		.order_info {
			margin: 16rpx;
			background-color: #FFFFFF;
			// height: 300rpx;
			border-radius: 16rpx;
			padding: 32rpx 0 20rpx 32rpx;

			.order_info_item {
				margin-bottom: 16rpx;
				display: flex;

				.order_info_item_left {
					color: #999999;
					font-weight: 400;
					font-size: 30rpx;
					font-style: normal;
					text-decoration: none;
					text-align: left;
					width: 170rpx;
				}

				.order_info_item_right {
					font-family: PingFangSC;
					color: #333333;
					font-weight: 400;
					font-size: 30rpx;
					font-style: normal;
					text-decoration: none;
					text-align: left;
				}
			}

			.yuyue_btn {
				display: flex;
			}
		}


	}
</style>